<!-- 对话模型 -->
<template>
  <div class="dialogue">

    <!-- 对话窗体 -->
    <div class="dialogueDom">
      <div class="mb-5" v-for="message in d.messages" :key="message.id">
        <!-- <div v-if="message.type === 'user'">{{ message.content }}</div> -->
        <UserDialogue v-if="message.type === 'user'" :data='message.content' />
        <div v-if="message.type === 'bot'">{{ message.content }}</div>
      </div>

    </div>

    <div class="dialogueInput">
      <img :src="arrowIcon1" alt="" srcset="">
      <el-input class="d-input" @keyup.enter="sendMessage" v-model="input" placeholder="请输入">
        <template #suffix>
          <el-icon class="el-input__icon">
            <img :src="arrowIcon" alt="" srcset="">
          </el-icon>
        </template>
      </el-input>
      <img :src="arrowIcon2" alt="" srcset="">

    </div>
  </div>
</template>
<script setup lang = "ts" >
import { ref, reactive } from 'vue'
import arrowIcon from '@/assets/docs/arrow_icon.svg'
import arrowIcon1 from '@/assets/docs/arrow_icon_1.svg'
import arrowIcon2 from '@/assets/docs/arrow_icon_2.svg'
import UserDialogue from "./userDialogue.vue";
const input = ref('')

interface SendMessage {
  id: number,
  type: string,
  content: string
}

const d = reactive<any>({
  messages: []
})

// 个人输入
const sendMessage = () => {
  const userInput = input.value;
  input.value = '';

  d.messages.push({
    id: Date.now(),
    type: 'user',
    content: userInput,
  });
  setTimeout(() => {
    d.messages.push({
      id: Date.now(),
      type: 'bot',
      content: 'chat',
    });
  }, 1000);
}
</script>
<style lang="scss" scoped>
.dialogue {
  img {
    cursor: pointer;
  }

  .dialogueDom {
    height: calc(100vh - 200px);
    overflow: auto;
  }

  :deep(.el-sub-menu) {}

  .dialogueInput {
    display: flex;

    .d-input {
      margin: 10px;
    }
  }
}
</style>
